<template>
  <div class="gonggao-publish-container">
    <div class="page-header">
      <h2>发布通告</h2>
    </div>

    <div class="form-container">
      <el-form :model="formData" ref="formRef" label-width="100px">
        <el-form-item label="通告标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入通告标题"></el-input>
        </el-form-item>
        <el-form-item label="通告内容" prop="content">
          <el-input v-model="formData.content" type="textarea" :rows="8" placeholder="请输入通告内容"></el-input>
        </el-form-item>
        <el-form-item label="通告id" label-width="100px">
          <el-select v-model="formData.categoryId" placeholder="请选择通告分类">
            <el-option v-for="(item) in noticeCateArr" :key="item._id" :label= item.name :value="item._id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">发布通告</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import { createAddRequest } from '@/api/gonggao'
import { noticeListRequest, type INoticeListItemRes } from '@/api/fenlei'
// const router = useRouter()

// 表单数据
const formData = ref({
  title: '',
  categoryId: " ",
  content: '',
})
const noticeCateArr = ref<INoticeListItemRes[]>([])
// 请求通知公告分类的接口数据
async function loadNoticeCate() {
  const res = await noticeListRequest()
  console.log(res.data.data.list)
  //保存分类数据到数组中
  noticeCateArr.value = res.data.data.list
}
loadNoticeCate()
// 提交表单
async function submitForm() {
  const date = await createAddRequest(
    formData.value.title,
    formData.value.content,
    formData.value.categoryId
  );
  console.log(date.data);
  // 提交成功后返回列表页
}

// 重置表单
const resetForm = () => {
  formData.value = {
    title: '',
    categoryId: '',
    content: '',
  }
}

</script>

<style lang="css" scoped>
.gonggao-publish-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.form-container {
  max-width: 800px;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-button {
  margin-right: 15px;
}

.el-upload__tip {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}
</style>
